<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"> </script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"> </script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-row type="flex" justify="center"  >
        <el-col :span="6" :offset="18">
            <el-form  >
                <el-form-item >
                    <span style="font-size:38px">欢迎回来</span>&nbsp;&nbsp;&nbsp;
                    <span><span>没有账号？</span> <a style="color: #409EFF;text-decoration:none" to="/register">前往注册 </a> </span>
                </el-form-item>
                <el-form-item >
                    <el-input  placeholder="请输入账号" v-model="param.username"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input show-password placeholder="请输入密码" v-model="param.password"></el-input>
                </el-form-item>
                <font color="red">{{msg}}</font>
                <el-form-item >
                    <el-button type="primary" style="width: 100%;" @click="loginBtn">登录</el-button>
                    <p><span>忘记密码？</span> <a style="color: #409EFF;text-decoration:none" to="/login">前往重置 </a> </p>
                </el-form-item>
            </el-form>
        </el-col>

    </el-row>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            imgsrc: '', // 存储头像的URL
            param:{

            },
            msg:'',
        },
        methods:{
            loginBtn(){
                axios.post('/user/loginBtn',this.param).then(resp=>{
                    if(resp.data.code==200){
                        location.href="/home"
                                                        //传进网页必须为json数据字符串
                        localStorage.setItem("userInfo",JSON.stringify(resp.data.data))
                    }
                    if(resp.data.code==2001){
                        this.msg="账号或密码错误"
                    }
                    if(resp.data.code==2000){
                        this.msg="账号或密码为空"
                    }
                })
            }
        }
    })
</script>
<style>
    .el-row{
        background-color: darkgray;
        background-image: url('/img/2000466.jpg');
        height: 100%;
    }
    .el-col{
        background: white;
        padding: 15% 20px;
        border-radius: 2px; /*加圆角 */
    }
    .el-input{
        margin: 8px 1px;
    }
</style>
</html>